/* components */
import {
  BaseSelectUserFilterFormTextField,
  BaseSelectUserFilterFormStateField,
  BaseSelectUserFilterFormSelectField,
  useBaseSelectUserFilterFields
} from '@src/component/common/BaseSelectUser/components'
import { 
  useFetchServiceProviderListAndServiceProviderUserList,
  useFetchServiceProviderQualificationList, 
  useFetchServiceProviderTypeList, 
} from '@src/component/common/BaseSelectUser/hooks/serviceProvider'
/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useBaseSelectUserOptions } from '@src/component/common/BaseSelectUser/hooks'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType, Ref, ref } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* types */
import { BaseSelectUserFilterServiceProviderForm, BaseSelectUserFilterServiceProviderFormValue } from '@src/component/common/BaseSelectUser/types'

export type FilterDepartmentProps = {
  value: BaseSelectUserFilterServiceProviderForm;
}

export interface FilterDepartmentSetupState {
  
}

export enum FilterServiceProviderEmitEventNameEnum {
  Input = 'input',
  Enter = 'enter',
}

export type FilterDepartmentInstance = ComponentInstance & FilterDepartmentSetupState
export type FilterDepartmentVM = ComponentRenderProxy<FilterDepartmentProps> & CommonComponentInstance & FilterDepartmentInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserFilterDepartment,
  emits: [
    FilterServiceProviderEmitEventNameEnum.Input,
    FilterServiceProviderEmitEventNameEnum.Enter,
  ],
  props: {
    value: {
      type: Object as PropType<BaseSelectUserFilterServiceProviderForm>,
      default: () => ({}),
    }
  },
  setup(props: FilterDepartmentProps, { emit }) {
    
    const {
      stateField,
      stateOptions,
      serviceProviderTypeField,
      serviceProviderQualificationField,
      serviceProviderNameField,
      serviceProviderTypeOptions,
      serviceProviderQualificationOptions
    } = useBaseSelectUserFilterFields()
    
    const { isShowUser, renderFilterContent } = useBaseSelectUserOptions()
    
    const onChangeQualificationHandler = (value: string[]) => {
      
      const form: BaseSelectUserFilterServiceProviderForm = {
        ...props.value,
        spList: value
      }
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
      
    }
    
    const onChangeTypeHandler = (value: string[]) => {
      
      const form: BaseSelectUserFilterServiceProviderForm = {
        ...props.value,
        spTypeList: value
      }
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
      
    }
    
    const onChangeStateHandler = (value: string[]) => {
      
      const form: BaseSelectUserFilterServiceProviderForm = {
        ...props.value,
        stateList: value
      }
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
      
    }
    
    const onChangeSpNameHandler = (value: string) => {
      
      const form: BaseSelectUserFilterServiceProviderForm = {
        ...props.value,
        spName: value
      }
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
      
    }

    const onChangeSaveValue = (value:any, key:keyof typeof BaseSelectUserFilterServiceProviderFormValue) => {
      let form: BaseSelectUserFilterServiceProviderForm = {
        ...props.value,
      }

      form[key] = value
      
      emit(FilterServiceProviderEmitEventNameEnum.Input, form)
    }
    
    const onEnterChangeSpNameHandler = () => {
      emit(FilterServiceProviderEmitEventNameEnum.Enter)
    }

    // 获取服务商和服务商人员列表
    const fetchServiceProviderListAndServiceProviderUserList = useFetchServiceProviderListAndServiceProviderUserList()
    fetchServiceProviderListAndServiceProviderUserList()
    // 获取服务商资质列表
    const fetchServiceProviderQualificationList = useFetchServiceProviderQualificationList()
    fetchServiceProviderQualificationList()
    // 获取服务商类型列表
    const fetchServiceProviderTypeList = useFetchServiceProviderTypeList()
    fetchServiceProviderTypeList()

    return {
      isShowUser,
      stateField,
      stateOptions,
      serviceProviderTypeField,
      serviceProviderQualificationField,
      serviceProviderNameField,
      serviceProviderTypeOptions,
      serviceProviderQualificationOptions,
      onChangeQualificationHandler,
      onChangeTypeHandler,
      onChangeStateHandler,
      onChangeSpNameHandler,
      onEnterChangeSpNameHandler,

      onChangeSaveValue,

      renderFilterContent,
    }
    
  },
  render(h: CreateElement) {
    let Content = []
    this.renderFilterContent.forEach(item=>{
      switch(item.type){
        case 'Text':
          Content.push(
            <BaseSelectUserFilterFormTextField 
              field={item.field}
              value={this.value[item.key]}
              onInput={ value => this.onChangeSaveValue(value, item.key) }
              onEnter={this.onEnterChangeSpNameHandler}
            >
            </BaseSelectUserFilterFormTextField>
          )
          break;
        case 'Select':
          let SelectOptions = []
          if(typeof item.options === 'string'){
            SelectOptions = this[item.options]
          }else{
            SelectOptions = item.options
          }
          Content.push(
            <BaseSelectUserFilterFormSelectField 
              field={item.field}
              options={SelectOptions}
              value={this.value[item.key]}
              onInput={ value => this.onChangeSaveValue(value, item.key) }
            >
            </BaseSelectUserFilterFormSelectField>
          )
          break;
        case 'State':
          let StateOptions = []
          if(typeof item.options === 'string'){
            StateOptions = this[item.options]
          }else{
            StateOptions = item.options
          }
          Content.push(
            <BaseSelectUserFilterFormStateField 
              field={item.field}
              options={StateOptions}
              value={this.value[item.key]}
              onInput={ value => this.onChangeSaveValue(value, item.key) }
            >
            </BaseSelectUserFilterFormStateField>
          )
          break;

      }
    })
    return (
      <div class={BaseSelectUserComponentNameEnum.BaseSelectUserFilterDepartment}>
       {Content}
      </div>
    )
  }
})
